<template>
	<view class="content">
		<view class="header">
			<view class="headerImage">
				<image :src="user.head" mode=""></image>
			</view>
			<view class="headerCont">
				<view class="headerName">
					{{user.nickName}}
				</view>
				<view class="headerTag">
					优秀市民
				</view>
			</view>
		</view>
		<view class="list" @click="toUrl('/pages/mine/exposure')">
			<view class="listLeft">
				<view class="listImage">
					<image src="/static/baoguang.png" mode=""></image>
				</view>
				我的曝光
			</view>
			<u-icon name="arrow-right" color="#333333" size="28"></u-icon>
		</view>
		<view class="list" @click="toUrl('/pages/mine/wxlogin')">
			<view class="listLeft">
				<view class="listImage">
					<image src="/static/ziliao.png" mode="" style="width: 50rpx;height: 35rpx;"></image>
				</view>
				编辑资料
			</view>
			<u-icon name="arrow-right" color="#333333" size="28"></u-icon>
		</view>
		<view class="btn" @click="goOut">
			退出登录
		</view>
		<!-- 底部导航栏 -->
		<view class="tabbarBox">
			<view class="tabbar">
				<view class="tabbar-item" @click="swtab('/pages/index/index')">
					<view class="tabbar-image">
						<image src="/static/tabbar/home.png" mode="" style="width: 57.22rpx;height: 57.22rpx;">
						</image>
					</view>
					<view class="tabbat-name">
						首页
					</view>
				</view>
				<view class="tabbarZj" @click="swtab('/pages/snapshot/snapshot')">
					<view class="tabbarZjCont">
						<u-icon name="camera" color="#ffffff" size="40"></u-icon>
						<view class="tabbarZjContText">
							随手拍
						</view>
					</view>
				</view>
				<view class="tabbar-item">
					<view class="tabbar-image">
						<image src="/static/tabbar/mineActive.png" mode="" style="width: 70rpx;height: 70rpx;"></image>
					</view>
					<view class="tabbat-name" style="color: #AFD4FE;">
						我的
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {}
			}
		},
		onLoad() {
			this.getUserInfo()
		},
		onShow() {
			uni.hideHomeButton()
		},
		methods: {
			getUserInfo() {
				this.$ajax.get({
					url: 'api/getUserInfo',
					data: {},
				}).then((res) => {
					if (res.code == 0) {
						this.user = res.user
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				});
			},
			// 退出登录
			goOut() {
				uni.reLaunch({
					url: '/pages/mine/login'
				})
			},
			swtab(urlSrc) {
				uni.switchTab({
					url: urlSrc
				})
			},
			toUrl(urlSrc) {
				uni.navigateTo({
					url: urlSrc
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding-bottom: 130rpx;
	}
	.header {
		display: flex;
		align-items: center;
		background: #AED4FF;
		padding: 40rpx;
		box-sizing: border-box;
		margin-bottom: 50rpx;

		.headerImage {
			width: 100rpx;
			height: 100rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

		.headerCont {
			margin-left: 30rpx;

			.headerName {
				font-size: 30rpx;
				color: #fff;
			}

			.headerTag {
				color: #fff;
				min-width: 150rpx;
				border: 1px solid #ffffff;
				text-align: center;
				padding: 3rpx;
				box-sizing: border-box;
				margin-top: 10rpx;
				border-radius: 10rpx;
				font-size: 28rpx;
			}
		}
	}

	.list {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 650rpx;
		margin: 0 auto 0;
		padding: 50rpx 0;
		border-bottom: 1px solid #dedede;

		.listLeft {
			display: flex;
			align-items: center;

			.listImage {
				width: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}

	.btn {
		background: #AED4FF;
		padding: 20rpx;
		border-radius: 10rpx;
		text-align: center;
		color: #ffffff;
		font-size: 30rpx;
		width: 600rpx;
		margin: 100rpx auto 0;
	}

	.tabbarBox {
		width: 100%;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: flex-end;

		.tabbar {
			width: 100%;
			height: 130rpx;
			background: #F9F9F9;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.tabbar-item {
				// width: 134rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;

				.tabbar-image {

					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 77rpx;
						height: 77rpx;
						display: block;
					}
				}

				.tabbat-name {
					font-size: 22rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #848383;
					text-align: center;
					margin-top: 5rpx;
				}
			}

			.tabbarZj {
				margin-top: -30rpx;

				.tabbarZjCont {
					width: 130rpx;
					height: 130rpx;
					border-radius: 50%;
					background: #AFD4FE;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;

					.tabbarZjContText {
						font-size: 22rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #111111;
						text-align: center;
						color: #ffffff;
						margin-top: 10rpx;
					}
				}
			}
		}
	}
</style>